<template>
  <section>
    <div>
      <el-row
        :gutter="5"
        style="margin:3px 12%;width: 76%;"
        class="topPanelFixed"
        :style="topPanelStyle"
      >
        <el-col>
          <el-card class="box-card" style="height: 70px;">
            <div style="float: left">
              <el-button
                icon="el-icon-document-add"
                type="text"
                :loading="loading"
                @click="preserve(0)"
                v-if="showSaveBtn"
              >
                保存
              </el-button>
              <el-button
                icon="el-icon-document-add"
                type="text"
                :loading="loading"
                @click="preserve(1)"
                v-if="showSaveBtn"
              >
                保存并关闭111
              </el-button>
            </div>
            <div style="float: right">
              <el-button icon="el-icon-circle-close" type="text" @click="back">
                关闭
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin:80px 12% 3px 12%">
        <cm-scroll>
          <el-form
            label-width="85px"
            ref="formInfo"
            :model="formInfo"
            :rules="rules"
          >
            <el-col :span="16">
              <el-row>
                <el-col>
                  <el-card class="box-card">
                    <el-form-item label="公告标题:" prop="title">
                      <el-input
                        type="textarea"
                        placeholder="请输入公告标题"
                        v-model="formInfo.title"
                        autosize
                        maxlength="100"
                        show-word-limit
                      ></el-input>
                      <el-checkbox v-model="checked" @change="checkSub"
                        >副标题</el-checkbox
                      >
                    </el-form-item>
                    <el-form-item label="副标题:" v-if="checked">
                      <el-input
                        type="textarea"
                        placeholder="请输入公告副标题"
                        v-model="formInfo.subTitle"
                        autosize
                        maxlength="100"
                        show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-card>
                </el-col>
                <el-col :class="editorClass">
                  <el-card class="box-card">
                    <el-form-item prop="content" label-width="0px">
                      <u-editor
                        ref="ueditor"
                        v-model="formInfo.content"
                        :config="myConfig"
                      ></u-editor>
                    </el-form-item>
                    <el-form-item
                      label-width="0px"
                      v-if="formInfo.articleID > 0"
                    >
                      <el-button @click="showRelevantDialog"
                        >添加相关文章</el-button
                      >
                      <page-table
                        :showPage="false"
                        v-if="
                          relevantList &&
                            relevantList.list &&
                            relevantList.list.length > 0
                        "
                        :page-data="relevantList"
                        :do-get-page-data="getRelevantList"
                      >
                        <el-table-column
                          type="index"
                          label="序号"
                          align="center"
                          width="70"
                        >
                        </el-table-column>
                        <el-table-column prop="title" label="标题" align="left">
                        </el-table-column>
                        <el-table-column
                          label="管理"
                          width="100"
                          align="center"
                          fixed="right"
                        >
                          <template slot-scope="scope">
                            <el-tooltip content="删除" placement="top">
                              <el-button
                                size="mini"
                                icon="el-icon-delete"
                                @click="delRelevantArticle(scope.row.id)"
                              ></el-button>
                            </el-tooltip>
                          </template>
                        </el-table-column>
                      </page-table>
                    </el-form-item>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-form>
          <el-col :span="8">
            <el-card class="box-card">
              <el-collapse v-model="activeName">
                <el-collapse-item name="1">
                  <div slot="title" style="color:red;">
                    基本属性
                  </div>
                  <el-form
                    label-width="90px"
                    ref="baseForm"
                    :model="formInfo"
                    :rules="rules"
                  >
                    <!--                    <el-form-item label="自定义顺序:">-->
                    <!--                      <el-input v-model="formInfo.articleFreeOrder"></el-input>-->
                    <!--                    </el-form-item>-->
                    <!--                    <el-form-item label="文章属性:">-->
                    <!--                      &lt;!&ndash;                    <el-select v-model="formInfo.articleType" placeholder="请选择" style="width: 100%;">&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                      <el-option&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                        v-for="item in options"&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                        :key="item.value"&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                        :label="item.label"&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                        :value="item.value">&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                      </el-option>&ndash;&gt;-->
                    <!--                      &lt;!&ndash;                    </el-select>&ndash;&gt;-->
                    <!--                      <el-checkbox-group v-model="checkList" @change="ckItem">-->
                    <!--                        <el-checkbox-->
                    <!--                          :label="item.value"-->
                    <!--                          v-for="item in options"-->
                    <!--                          :key="item.value"-->
                    <!--                          >{{ item.label }}-->
                    <!--                        </el-checkbox>-->
                    <!--                      </el-checkbox-group>-->
                    <!--                    </el-form-item>-->
                    <!--                    <el-form-item label="文章分类:">-->
                    <!--                      <el-select-->
                    <!--                        v-model="formInfo.category"-->
                    <!--                        placeholder="请选择"-->
                    <!--                        style="width: 100%;"-->
                    <!--                      >-->
                    <!--                        <el-option-->
                    <!--                          v-for="item in esTypes"-->
                    <!--                          :key="item.value"-->
                    <!--                          :label="item.label"-->
                    <!--                          :value="item.value"-->
                    <!--                        >-->
                    <!--                        </el-option>-->
                    <!--                      </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="跳转地址:" v-if="showUrlEditor">
                      <el-input v-model="formInfo.articleUrl"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="文章缩略图:">-->
                    <!--                      <div class="block">-->
                    <!--                        <el-upload-->
                    <!--                          class="avatar-uploader"-->
                    <!--                          :action="imgHead"-->
                    <!--                          :headers="head"-->
                    <!--                          :data="uploadData"-->
                    <!--                          :show-file-list="false"-->
                    <!--                          accept=".jpg,.jpeg,.png,.gif"-->
                    <!--                          :on-success="handleAvatarSuccess"-->
                    <!--                          :before-upload="beforeAvatarUpload"-->
                    <!--                        >-->
                    <!--                          <img-->
                    <!--                            v-if="imageUrl1"-->
                    <!--                            :src="imageUrl1 | fullImagePath"-->
                    <!--                            class="avatar"-->
                    <!--                          />-->
                    <!--                          <i v-else class="el-icon-plus avatar-uploader-icon">-->
                    <!--                            <span class="Warning">上传图片</span>-->
                    <!--                          </i>-->
                    <!--                        </el-upload>-->
                    <!--                        <span style="color: #dddddd;"-->
                    <!--                          >提示：文章缩略图支持jpg格式</span-->
                    <!--                        >-->
                    <!--                      </div>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="公告来源11:">
                      <el-input
                        placeholder="请输入公告来源"
                        v-model="formInfo.source"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="公告作者:">
                      <el-input
                        placeholder="请输入公告作者"
                        v-model="formInfo.writer"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="所属栏目:" prop=" itemId">
                      <el-select v-model="formInfo.itemId">
                        <el-option
                          v-for="item in myColumnList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="标题图:" prop="image">
                      <picture-upload
                        v-model="formInfo.image"
                        type="image"
                        @del-picture="delPicture"
                        @add-picture="addPicture"
                      />
                    </el-form-item>
                    <!--                    <el-form-item label="是否定时:">-->
                    <!--                      <el-switch-->
                    <!--                        v-model="formInfo.basicDateState"-->
                    <!--                        active-value="1"-->
                    <!--                        inactive-value="0"-->
                    <!--                        active-color="#13ce66"-->
                    <!--                        inactive-color="#cecece"-->
                    <!--                      >-->
                    <!--                      </el-switch>-->
                    <!--                    </el-form-item>-->
                    <!--                    <el-form-item label="发布时间:">-->
                    <!--                      <div class="block">-->
                    <!--                        <el-date-picker-->
                    <!--                          v-model="formInfo.basicDateTime"-->
                    <!--                          type="datetime"-->
                    <!--                          value-format="yyyy-MM-dd HH:mm:ss"-->
                    <!--                          placeholder="选择日期"-->
                    <!--                          style="width: 100%;"-->
                    <!--                        >-->
                    <!--                        </el-date-picker>-->
                    <!--                      </div>-->
                    <!--                    </el-form-item>-->
                    <!--                    <el-form-item label="描述:">-->
                    <!--                      <el-input-->
                    <!--                        type="textarea"-->
                    <!--                        placeholder="请输入对该文章的简短描述，以便用户查看文章简略"-->
                    <!--                        v-model="formInfo.basicDescription"-->
                    <!--                      ></el-input>-->
                    <!--                    </el-form-item>-->
                    <!--                    <el-form-item label="关键字:">-->
                    <!--                      <el-input-->
                    <!--                        type="textarea"-->
                    <!--                        placeholder="请输入文章关键字"-->
                    <!--                        v-model="formInfo.articleKeyword"-->
                    <!--                      ></el-input>-->
                    <!--                    </el-form-item>-->
                  </el-form>
                </el-collapse-item>
                <el-collapse-item
                  name="2"
                  v-if="otherForm.listField && otherForm.listField.length > 0"
                >
                  <div slot="title" style="color:red;">
                    扩展字段
                  </div>
                  <template>
                    <el-form
                      label-width="90px"
                      ref="otherForm"
                      :model="formInfo"
                      :rules="rules"
                    >
                      <el-form-item
                        v-for="(item, index) in otherForm.listField"
                        :item="item"
                        :key="index"
                        :label="item.fieldTipsName"
                      >
                        <el-input
                          v-model="formInfo[item.fieldFieldName]"
                          v-if="item.fieldType === 1"
                          clearable
                        ></el-input>
                        <el-input
                          type="textarea"
                          v-model="formInfo[item.fieldFieldName]"
                          v-if="item.fieldType === 2"
                        ></el-input>
                        <el-input
                          type="number"
                          v-model="formInfo[item.fieldFieldName]"
                          v-if="item.fieldType === 4"
                        ></el-input>
                        <el-input
                          type="number"
                          v-model="formInfo[item.fieldFieldName]"
                          v-if="item.fieldType === 5"
                        ></el-input>
                        <el-input
                          type="number"
                          v-model="formInfo[item.fieldFieldName]"
                          v-if="item.fieldType === 6"
                        ></el-input>
                        <el-select
                          v-model="formInfo[item.fieldFieldName]"
                          v-if="item.fieldType === 9"
                          clearable
                          style="width: 100%"
                        >
                          <el-option
                            v-for="opItem in item.options"
                            :key="opItem"
                            :label="opItem"
                            :value="opItem"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </el-card>
          </el-col>
        </cm-scroll>
      </el-row>
    </div>
    <el-dialog
      class="log_dialog"
      title="处理历史"
      append-to-body
      width="60%"
      :visible.sync="showLogDialog"
      v-if="showLogDialog"
      destroy-on-close
    >
      <log-list @close="onLogClose" :article-id="articleId"></log-list>
    </el-dialog>
    <el-dialog
      class="log_dialog"
      title="设置相关阅读"
      append-to-body
      width="60%"
      :visible.sync="showRelevantSetDialog"
      v-if="showRelevantSetDialog"
      destroy-on-close
    >
      <relevant-list
        @close="onRelevantClose"
        :article-id="articleId"
      ></relevant-list>
    </el-dialog>
  </section>
</template>

<script>
// import TreeSelect from "@/components/el-tree-select/treeSelect.vue";
import { mapGetters } from "vuex";
// import LogList from "./logList";
// import RelevantList from "./relevantList";
// import _ from "lodash";

export default {
  name: "articleEdit",
  props: {
    isClose: Boolean,
    articleId: String,
    columnId: String,
    zIndex: {
      type: Number,
      default: 2500
    }
  },
  data() {
    return {
      loading: false,
      topPanelStyle: {
        "z-index": Number.parseInt(this.zIndex) + 2
      },
      showRelevantSetDialog: false,
      showLogDialog: false,
      checked: false,
      showUrlEditor: false, //是否展示跳转地址
      checkList: [], //文章属性选中值集合
      activeName: ["1", "2"],
      content: null,
      topPanelClass: "topPanelFixed",
      editorClass: "editor",
      editorOption: {},
      options: this.getDictionary("WZSX"),
      esTypes: this.getDictionary("esEZCXLX"),
      value: "",
      value1: "",
      imgHead: window.api.uploadUrl,
      head: {
        appKey: window.sessionStorage.getItem("appKey"),
        Authorization: window.sessionStorage.getItem("token")
      },
      uploadData: {
        type: 1
      },
      imageUrl1: "",
      myConfig: {
        zIndex: this.zIndex,
        initialFrameHeight: 600,
        autoHeightEnabled: true
      },
      formInfo: {
        writer: "", //文章作者
        category: "", //文章搜索类型
        // articleCate: "", //文章来源类型（字典）
        content: "", //文章内容
        sort: "", //文章自定义显示顺序
        id: "", //文章ID
        // articleKeyword: "", //文章关键字
        url: "", //文章url地址
        source: "", //文章来源
        // articleTypeLinkURL: "", //文章分类url地址
        // articleType: "", //文章属性
        // articleUrl: "", //文章跳转链接
        itemId: "", //所属栏目编号
        // basicDescription: "", //描述
        // basicDisplay: "", //显示属性
        // basicThumbnails: "", //缩略图
        title: "", //标题
        subTitle: "", //副标题
        status: "", //文章状态（字典）
        // publishTime: "", //定时发布时间
        // contentModelList: []
        type: ""
      },
      otherForm: {},
      rules: {
        title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入公告内容", trigger: "blur" }
        ],
        basicDateTime: [
          { required: true, message: "请输入公告发布时间", trigger: "blur" }
        ]
        // basicCategoryId: [
        //   { required: true, message: "请选择文章栏目", trigger: "blur" }
        // ]
      },
      tree: {
        placeholder: "模糊搜索",
        props: {
          value: "id", // ID字段名
          label: "label", // 显示名称
          children: "children" // 子级字段名
        },
        accordion: true,
        clearable: true
      },
      relevantList: {} // 相关文章分页列表
    };
  },
  created() {
    if (this.articleId > 0) {
      this.formInfo.id = this.articleId;
    }
    if (this.columnId > 0) {
      let item = this.myColumnList.find(i => {
        return i.id == this.columnId;
      });
      // console.log(item);
      this.formInfo.itemId = this.columnId;
      this.formInfo.itemName = item.name;
    }
  },
  mounted() {
    this.getColumnTree();
  },
  destroyed() {},
  computed: {
    // ...mapGetters({
    //   myColumnList: "myColumnList"
    // }),
    showBtn() {
      if (
        this.formInfo.status === "NEW_A" ||
        this.formInfo.status === "ADOPT_B" ||
        this.formInfo.status === "REFUSE_A"
      ) {
        return true;
      } else {
        return false;
      }
    },
    showSaveBtn() {
      if (this.formInfo.status === "AUDIT_A") {
        return false;
      } else {
        return true;
      }
    },
    showReportBtn() {
      if (this.formInfo.status === "NEW_B") {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    delPicture(type) {
      this.formInfo[type] = "";
    },
    // 添加图片回调
    addPicture(val, type) {
      this.formInfo[type] = val;
    },
    // 标题换行监听
    titleEnter(val) {
      // console.log(val, 3333);
    },
    //删除 相关文章
    async delRelevantArticle(id) {
      let confirm = await this.confirmForm("是否删除该数据");
      if (confirm === "cancel") return;
      this.loading = true;
      this.API.deleteArticleRelevantUsingPOST({ idDto: { id: id } }).then(
        res => {
          this.success("删除成功");
          this.loading = false;
        }
      );
    },
    // 弹出设置关联文章
    showRelevantDialog() {
      this.showRelevantSetDialog = true;
    },
    // // 获取相关文章列表
    // getRelevantList() {
    //   if (this.articleId > 0) {
    //     this.API.getArticleRelevantListUsingPOST({
    //       idDto: { id: this.articleId }
    //     }).then(res => {
    //       this.relevantList = {};
    //       this.relevantList.list = res.data;
    //     });
    //   }
    // },
    // 关闭日志回调
    onLogClose() {
      this.showLogDialog = false;
    },
    // // 关闭设置相关文章回调
    // onRelevantClose(tag) {
    //   this.showRelevantSetDialog = false;
    //   if (tag) {
    //     this.getRelevantList();
    //   }
    // },
    // 打开处理日志
    showLog() {
      this.showLogDialog = true;
    },
    checkSub(val) {
      this.checked = val;
    },
    // 属性-选中事件
    ckItem(val) {
      this.checkList = val;
      this.formInfo.articleType = this.checkList.join(",");
      this.showUrlEditor = this.formInfo.articleType.includes("j");
    },
    // 重置表单
    resetForm() {
      this.formInfo = {
        articleAuthor: "", //文章作者
        articleEsType: "", //文章搜索类型
        articleCate: "", //文章来源类型（字典）
        content: "", //文章内容
        articleFreeOrder: "", //文章自定义显示顺序
        articleID: "", //文章ID
        articleKeyword: "", //文章关键字
        articleLinkURL: "", //文章url地址
        articleSource: "", //文章来源
        articleTypeLinkURL: "", //文章分类url地址
        articleType: "", //文章属性
        articleUrl: "", //文章跳转链接
        itemId: 0, //所属分类编号
        basicDescription: "", //描述
        basicDisplay: "", //显示属性
        basicThumbnails: "", //缩略图
        title: "", //标题
        subTitle: "",
        status: "", //文章状态（字典）
        basicDateTime: "",
        contentModelList: []
      };
      if (this.columnId > 0) {
        this.formInfo.itemId = this.columnId;
      }
    },
    // 文章详情
    getDetails() {
      if (this.articleId > 0) {
        this.$store
          .dispatch("viewArticleUsingGETS", { id: this.articleId })
          .then(ret => {
            this.formInfo = ret.data;
            let re = /(<br\/>|<br>|<BR>|<BR\/>)/g;
            this.formInfo.subTitle = this.formInfo.subTitle.replace(re, "\n");
            this.formInfo.itemId = ret.data.itemId;
            if (this.formInfo.subTitle && this.formInfo.subTitle.length > 0) {
              this.checked = true;
            }
            if (
              this.formInfo.articleType &&
              this.formInfo.articleType.length > 0
            ) {
              this.checkList = _.cloneDeep(
                this.formInfo.articleType.split(",")
              );
              this.showUrlEditor = this.formInfo.articleType.includes("j");
            }
            if (this.formInfo.basicThumbnails) {
              this.imageUrl1 = this.formInfo.basicThumbnails;
            }
          });
      }
    },
    // 获取扩展字段
    // getOtherFormFiled() {
    //   if (this.formInfo.basicCategoryId > 0) {
    //     let data = {
    //       columnId: this.formInfo.basicCategoryId,
    //       basicId: this.formInfo.articleID ? this.formInfo.articleID : 0
    //     };
    //     this.API.queryFieldOverwriteUsingGET(data).then(res => {
    //       this.otherForm = res.data;
    //       if (this.otherForm.listField) {
    //         this.otherForm.listField.map(item => {
    //           if (item.fieldType === 9) {
    //             item.options = item.fieldDefault.split(",");
    //             this.$set(
    //               this.formInfo,
    //               item.fieldFieldName,
    //               this.otherForm.filedValue === undefined
    //                 ? item.options.length > 0
    //                   ? item.options[0]
    //                   : ""
    //                 : this.otherForm.filedValue[item.fieldFieldName]
    //             );
    //           } else {
    //             this.$set(
    //               this.formInfo,
    //               item.fieldFieldName,
    //               this.otherForm.filedValue === undefined
    //                 ? item.fieldDefault
    //                 : this.otherForm.filedValue[item.fieldFieldName]
    //             );
    //           }
    //         });
    //       }
    //     });
    //   }
    // },
    // setCategoryId(val) {
    //   console.log("获取ID", val);
    //   this.formInfo.itemId = val;
    //   if (val) {
    //   }
    // },
    // // scrollToTop() {
    // //   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    // //   if (scrollTop > 5) {
    // //     this.topPanelClass = 'topPanelFixed'
    // //   } else {
    // //     this.topPanelClass = 'topPanel'
    // //   }
    // // },
    handleAvatarSuccess(file) {
      this.imageUrl1 = file.newFileName;
      this.formInfo.basicThumbnails = file.newFileName;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpg";
      const isJPEG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPEG && !isPNG && !isGIF) {
        this.$message.error("上传图片只能是 JPG/GIF/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return (isJPEG || !isGIF || !isPNG) && isLt2M;
    },
    //  获取栏目列表
    getColumnTree() {
      this.$store.dispatch("getMyColumnList").then(ret => {
        this.formInfo.itemId = Number(this.columnId > 0 ? this.columnId : 0);
        this.getDetails();
      });
    },
    //保存
    async preserve(tag) {
      // console.log(tag);
      // console.log(this.$refs["formInfo"]);
      let formInfo = false;
      let baseForm = false;
      let otherForm = true;
      this.$refs["formInfo"].validate(valid => {
        formInfo = valid;
      });
      if (!formInfo) return;
      this.$refs["baseForm"].validate(valid => {
        baseForm = valid;
      });
      if (!baseForm) return;
      if (this.otherForm.listField && this.otherForm.listField.length > 0) {
        this.$refs["otherForm"].validate(valid => {
          otherForm = valid;
        });
        if (!otherForm) return;
      }
      let confirm = await this.confirmForm("是否确认保存");
      if (confirm === "cancel") return;
      this.loading = true;
      if (formInfo && baseForm && otherForm) {
        //副标题为空 保存会报错 先注释了
        // this.formInfo.subTitle = this.formInfo.subTitle.replace(/\n/g, "<br/>");
        let data = Object.assign(this.formInfo);
        let map = [];
        if (this.otherForm.listField) {
          this.otherForm.listField.map((item, index) => {
            map.push({
              key: item.fieldFieldName,
              value: this.formInfo[item.fieldFieldName]
            });
          });
        }
        // data.contentModelList = map;
        let tem = { body: data };
        // console.log(tem);
        if (data.id > 0) {
          this.API.addOrUpdateNewsArticle(tem)
            .then(ret => {
              // this.resetForm()
              this.success("编辑成功");
              if (tag === 1) {
                this.back();
              }
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          this.API.addOrUpdateNewsArticle(tem)
            .then(ret => {
              this.resetForm();
              this.success("保存成功");
              if (tag === 1) {
                this.back();
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      }
    },
    // 审核
    async audit() {
      // let confirm = await this.confirmForm('是否确认审核通过')
      // if (confirm === 'cancel') return
      // this.loading = true
      // let data = {statusListDto: [{articleID: this.formInfo.articleID, articleCate: this.formInfo.articleCate}]}
      // this.API.appoveArrticleUsingPOST(data).then(res => {
      //   this.success('审核成功')
      //   this.back()
      // }).finally(()=>{
      //   this.loading = false
      // })

      let formInfo = false;
      let baseForm = false;
      let otherForm = true;
      this.$refs["formInfo"].validate(valid => {
        formInfo = valid;
      });
      if (!formInfo) return;
      this.$refs["baseForm"].validate(valid => {
        baseForm = valid;
      });
      if (!baseForm) return;
      if (this.otherForm.listField && this.otherForm.listField.length > 0) {
        this.$refs["otherForm"].validate(valid => {
          otherForm = valid;
        });
        if (!otherForm) return;
      }
      let confirm = await this.confirmForm("是否确认审核通过");
      if (confirm === "cancel") return;
      if (formInfo && baseForm && otherForm) {
        this.formInfo.subTitle = this.formInfo.subTitle.replace(/\n/g, "<br/>");
        let data = Object.assign(this.formInfo);
        let map = [];
        if (this.otherForm.listField) {
          this.otherForm.listField.map((item, index) => {
            map.push({
              key: item.fieldFieldName,
              value: this.formInfo[item.fieldFieldName]
            });
          });
        }
        // data.contentModelList = map;
        let tem = { article: data };
        this.loading = true;
        this.API.updateAndApproveUsingPOST(tem)
          .then(ret => {
            this.resetForm();
            this.success("审核成功");
            this.back();
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 拒绝
    async cancelAudit() {
      // let confirm = await this.confirmForm('是否确认拒绝')
      // if (confirm === 'cancel') return
      // this.loading = true
      // let data = {statusListDto: [{articleID: this.formInfo.articleID, articleCate: this.formInfo.articleCate}]}
      // this.API.rejectArticleUsingPOST(data).then(res => {
      //   this.success('拒绝成功')
      //   // this.back()
      // }) .finally(()=>{
      //   this.loading = false
      // })

      let formInfo = false;
      let baseForm = false;
      let otherForm = true;
      this.$refs["formInfo"].validate(valid => {
        formInfo = valid;
      });
      if (!formInfo) return;
      this.$refs["baseForm"].validate(valid => {
        baseForm = valid;
      });
      if (!baseForm) return;
      if (this.otherForm.listField && this.otherForm.listField.length > 0) {
        this.$refs["otherForm"].validate(valid => {
          otherForm = valid;
        });
        if (!otherForm) return;
      }
      let confirm = await this.confirmForm("是否确认拒绝");
      if (confirm === "cancel") return;
      if (formInfo && baseForm && otherForm) {
        this.formInfo.subTitle = this.formInfo.subTitle.replace(/\n/g, "<br/>");
        let data = Object.assign(this.formInfo);
        let map = [];
        if (this.otherForm.listField) {
          this.otherForm.listField.map((item, index) => {
            map.push({
              key: item.fieldFieldName,
              value: this.formInfo[item.fieldFieldName]
            });
          });
        }
        // data.contentModelList = map;
        let tem = { article: data };
        this.loading = true;
        this.API.updateAndRejectUsingPOST(tem)
          .then(ret => {
            this.resetForm();
            this.success("拒绝成功");
            this.back();
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 上报采纳
    async reportAccept() {
      let confirm = await this.confirmForm("是否确认采纳");
      if (confirm === "cancel") return;
      let tem = [
        {
          articleCate: "PUSH_SEND",
          articleID: this.articleID
        }
      ];
      this.loading = true;
      this.$store
        .dispatch("acceptArticleUsingPOSTS", { statusListDto: tem })
        .then(ret => {
          this.success("已采纳");
          this.back();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 保存并采纳
    async reportAcceptAndSave() {
      let formInfo = false;
      let baseForm = false;
      let otherForm = true;
      this.$refs["formInfo"].validate(valid => {
        formInfo = valid;
      });
      if (!formInfo) return;
      this.$refs["baseForm"].validate(valid => {
        baseForm = valid;
      });
      if (!baseForm) return;
      if (this.otherForm.listField && this.otherForm.listField.length > 0) {
        this.$refs["otherForm"].validate(valid => {
          otherForm = valid;
        });
        if (!otherForm) return;
      }
      let confirm = await this.confirmForm("是否确认保存并采纳");
      if (confirm === "cancel") return;
      if (formInfo && baseForm && otherForm) {
        this.formInfo.subTitle = this.formInfo.subTitle.replace(/\n/g, "<br/>");
        let data = Object.assign(this.formInfo);
        let map = [];
        if (this.otherForm.listField) {
          this.otherForm.listField.map((item, index) => {
            map.push({
              key: item.fieldFieldName,
              value: this.formInfo[item.fieldFieldName]
            });
          });
        }
        // data.contentModelList = map;
        let tem = { article: data };
        this.loading = true;
        this.API.updateAndAcceptArticleUsingPOST(tem)
          .then(ret => {
            this.resetForm();
            this.success("已采纳");
            this.back();
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 上报拒绝
    async reportReject() {
      let confirm = await this.confirmForm("是否确认拒绝");
      if (confirm === "cancel") return;
      let tem = [
        {
          articleCate: "PUSH_SEND",
          basicId: this.articleID
        }
      ];
      this.loading = true;
      this.$store
        .dispatch("acceptRejectArticleUsingPOSTS", { reportDtoList: tem })
        .then(ret => {
          this.success("已拒绝采纳");
          this.back();
        })
        .finally(() => {
          this.loading = false;
        });
    },

    preview() {
      this.API.webGeneraterViewUsingGET({
        articleId: this.formInfo.articleID
      }).then(res => {
        window.open(window.web + res.data, "_blank");
      });
      // window.open(window.web + "/templets/1/lysrmzf/jtwzxqy.html?" + this.formInfo.articleID, "_blank");
    },
    // 关闭
    back() {
      this.$emit("close");
      this.$emit("search");
    }
  },
  // components: {
  //   // TreeSelect,
  //   LogList,
  //   RelevantList
  // }
};
</script>

<style scoped lang="scss">
@import "../../../../styles/vars";
@import "../../../../styles/common.css";
//  主背景色
.main-content {
  background-color: $main-bg;
}
.ne-corner {
  d: path(
    "M290,0 C295,0,300,5,300,10 L300,200 C200,100,200,100,100,0 L100,0 Z"
  );
  fill: rgb(40, 176, 110);
  color: rgb(255, 255, 255);
  transition: all 0.2s linear 0.1s;
}

.editor {
  position: relative;
}

.topPanel {
}

.topPanelFixed {
  position: fixed;
  top: 0px;
}

/deep/ .el-card__body {
  padding: 16px;
}

.avatar-uploader {
  .el-upload--text {
    img {
      object-fit: cover;
    }

    .avatar-uploader-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      line-height: 30px;
      color: #ccc;

      &::before {
        font-weight: bold;
      }

      span {
        font-size: 15px;
        display: block;
        margin-top: 5px;
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
}
</style>
